import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/models/sports/sport_type.dart';
import 'package:share_fit/app/routes/sports_routes.dart';
import 'package:share_fit/generated/locales.g.dart';

import 'sports_logic.dart';

class SportsPage extends StatelessWidget {
  SportsPage({super.key});

  final logic = Get.put(SportsLogic());
  final state = Get.find<SportsLogic>().state;

  @override
  Widget build(BuildContext context) {

    state.sportTypes = [
      SportType(LocaleKeys.sports_category_run_text.ts, 'assets/images/sports/run.png', SportsRoutes.runningPage),
      SportType(LocaleKeys.sports_category_indoor_sport_text.ts,'assets/images/sports/indoor_run.png', SportsRoutes.indoorSportsPage),
      SportType(LocaleKeys.sports_category_riding_text.ts,'assets/images/sports/riding.png', SportsRoutes.ridingPage),
      SportType(LocaleKeys.sports_category_ball_game_text.ts,'assets/images/sports/ball_game.png', SportsRoutes.ballGamePage),
      SportType(LocaleKeys.sports_category_dance_sport_text.ts,'assets/images/sports/sport_dance.png', SportsRoutes.sportsDancePage),
      SportType(LocaleKeys.sports_category_winter_sport_text.ts,'assets/images/sports/ice_snow.png', SportsRoutes.winterSportsPage),
      SportType(LocaleKeys.sports_category_special_project_text.ts,'assets/images/sports/special.png', SportsRoutes.specialSportsPage),
      SportType(LocaleKeys.sports_category_wrestle_text.ts,'assets/images/sports/wrestle.png', SportsRoutes.wrestlePage),
    ];

    return Scaffold(
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.only(top: 159.h, left: 42.w, right: 42.w, bottom: 100.h),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 41.w),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(LocaleKeys.sports.ts, style: TextStyle(fontSize: 80.sp)),
                        SizedBox(height: 20.h),
                        Text(LocaleKeys.sports_title_slogan.ts, style: TextStyle(fontSize: 48.sp)),
                      ],
                    ),
                    // GestureDetector(
                    //   child: Container(
                    //     padding: EdgeInsets.symmetric(vertical: 20.w, horizontal: 10.w),
                    //     decoration: BoxDecoration(color: Colors.white70.withOpacity(0.9), borderRadius: BorderRadius.circular(40.r)),
                    //     child: Column(
                    //       children: [
                    //         Image.asset('assets/images/sports/route.png', width: 56.w, height: 56.h),
                    //         SizedBox(height: 30.h),
                    //         Text(LocaleKeys.sports_title_route.ts, style: TextStyle(fontSize: 30.sp)),
                    //       ],
                    //     ),
                    //   ),
                    //   onTap: () => {},
                    // ),
                  ],
                ),
              ),
              SizedBox(height: 82.h),
              Container(
                  padding: EdgeInsets.all(30.w),
                  height: 1273.h,
                  child: Container(
                    padding: EdgeInsets.all(10.w),
                    decoration: BoxDecoration(
                      boxShadow: [BoxShadow(color: Colors.grey.withOpacity(0.7), blurRadius: 5)],
                      borderRadius: BorderRadius.circular(60.r),
                    ),
                    child: Stack(
                      fit: StackFit.expand,
                      alignment: Alignment.center,
                      children: [
                        GoogleMap(
                          mapToolbarEnabled: false,
                          zoomControlsEnabled: false,
                          mapType: MapType.normal,
                          initialCameraPosition: const CameraPosition(target: LatLng(39.906217, 116.3912757), zoom: 16.0),
                          myLocationEnabled: false,
                          myLocationButtonEnabled: false,
                          onMapCreated: (GoogleMapController controller) => logic.onMapCreated(controller),
                        ),
                        Positioned(
                          bottom: 20.h,
                          child: GestureDetector(
                            child: Image.asset('assets/images/sports/go.png', width: 341.w, height: 341.h),
                            onTap: () => logic.goMovementPage() /*logic.startExercise()*/,
                          ),
                        )
                      ],
                    ),
                  )),
              SizedBox(height: 10.h),
              GridView.builder(
                physics: const NeverScrollableScrollPhysics(),
                itemCount: state.sportTypes.length,
                shrinkWrap: true,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 28.w,
                  mainAxisSpacing: 28.w,
                  childAspectRatio: 1.9,
                ),
                itemBuilder: (context, index) => state.sportTypes.map((e) => _buildSportTypeItem(e)).toList()[index],
              )
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildSportTypeItem(SportType item) {
    return GestureDetector(
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white70.withOpacity(0.9),
          borderRadius: BorderRadius.circular(60.r),
        ),
        padding: EdgeInsets.only(left: 16.w, top: 32.w, right: 26.w, bottom: 20.w),
        child: Column(
          children: [
            Expanded(
              child: Row(
                children: [
                  Image.asset(item.image, height: 80.h, width: 80.w),
                  SizedBox(width: 13.w),
                  Expanded(
                    child: Text(
                      item.name,
                      style: TextStyle(fontSize: 56.sp),
                      overflow: TextOverflow.ellipsis,
                      softWrap: true,
                      maxLines: 1,
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Text(
                    item.moreText,
                    style: TextStyle(fontSize: 42.sp, color: Colors.black.withOpacity(0.7)),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
      onTap: () => logic.goSportsCategoryPage(item.moreRoute),
    );
  }
}
